<template>
  <div class="contests-wrapper">
    <el-card class="block-card">
      <div class="page-header">
        <h2 class="page-title">竞赛列表</h2>
      </div>
      
      <!-- 搜索工具栏 -->
      <div class="contests-toolbar">
        <div class="contests-toolbar-left">
          <el-input v-model="search" size="small" placeholder="竞赛标题" style="width: 200px; margin-right: 8px;" @keyup.enter.native="handleSearch" />
          <el-button type="primary" size="small" icon="el-icon-search" @click="handleSearch">查找</el-button>
        </div>
      </div>
      
      <el-table :data="contests" class="only-bottom-border-table" style="width: 100%;" :show-header="true" :border="false" v-loading="loading">
        <el-table-column prop="id" label="#" width="80" />
        <el-table-column prop="title" label="竞赛名称">
          <template slot-scope="scope">
            <a
              :style="getContestStatus(scope.row) === '即将开始' ? 'color:#bbb;cursor:not-allowed;text-decoration:none;' : 'color:#13c2c2;text-decoration:none;cursor:pointer;'"
              href="javascript:void(0)"
              @click="getContestStatus(scope.row) === '即将开始' ? null : viewContest(scope.row.id)"
            >
              {{ scope.row.title }}
            </a>
            <el-tag v-if="getContestStatus(scope.row) === '进行中'" type="success" size="mini" style="margin-left: 8px;">进行中</el-tag>
            <el-tag v-else-if="getContestStatus(scope.row) === '即将开始'" type="warning" size="mini" style="margin-left: 8px;">即将开始</el-tag>
            <el-tag v-else type="info" size="mini" style="margin-left: 8px;">已结束</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="start_time" label="开始时间" width="180">
          <template slot-scope="scope">
            {{ formatTime(scope.row.start_time) }}
          </template>
        </el-table-column>
        <el-table-column prop="end_time" label="结束时间" width="180">
          <template slot-scope="scope">
            {{ formatTime(scope.row.end_time) }}
          </template>
        </el-table-column>
        <el-table-column prop="duration" label="时长" width="100">
          <template slot-scope="scope">
            {{ formatDuration(scope.row.duration) }}
          </template>
        </el-table-column>
        <el-table-column prop="participant_count" label="参赛人数" width="100" />
        <el-table-column prop="problem_count" label="题目数量" width="100" />
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              :disabled="getContestStatus(scope.row) === '即将开始'"
              :style="getContestStatus(scope.row) === '即将开始' ? 'color:#bbb;cursor:not-allowed;' : ''"
              @click="getContestStatus(scope.row) === '即将开始' ? null : viewContest(scope.row.id)"
            >
              查看
            </el-button>
            <el-button type="text" size="small" @click="registerContest(scope.row.id)" v-if="getContestStatus(scope.row) === '即将开始'">报名</el-button>
            <el-button type="text" size="small" @click="enterContest(scope.row.id)" v-if="getContestStatus(scope.row) === '进行中'">进入</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <br>
      <PageCom 
        :total="total" 
        :pageSize="pageSize"
        :currentPage="currentPage"
        @handleCurrentChange="handlePageChange"
        @handleSizeChange="handlePageSizeChange"
      />
    </el-card>
  </div>
</template>

<script>
import { contestList } from '@/api/oj'
import PageCom from '@/components/PageCom.vue'

export default {
  name: 'ContestsView',
  components: {
    PageCom
  },
  data() {
    return {
      loading: false,
      currentPage: 1,
      pageSize: 10,
      search: '',
      total: 0,
      contests: []
    }
  },
  mounted() {
    this.fetchContests()
  },
  methods: {
    async fetchContests() {
      this.loading = true
      try {
        const params = {
          page: this.currentPage,
          pageSize: this.pageSize,
          keyword: this.search
        }
        
        const response = await contestList(params)
        if (response.data.code === 200) {
          this.contests = response.data.data.data
          this.total = response.data.data.total
        } else {
          this.$message.error(response.data.message || '获取竞赛列表失败')
        }
      } catch (error) {
        console.error('获取竞赛列表失败:', error)
        this.$message.error('获取竞赛列表失败')
      } finally {
        this.loading = false
      }
    },
    
    handlePageChange(page) {
      this.currentPage = page
      this.fetchContests()
    },
    
    handlePageSizeChange(size) {
      this.pageSize = size
      this.currentPage = 1
      this.fetchContests()
    },
    
    handleSearch() {
      this.currentPage = 1
      this.fetchContests()
    },
    
    formatTime(timestamp) {
      if (!timestamp) return '-'
      const date = new Date(timestamp * 1000)
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      })
    },
    
    formatDuration(minutes) {
      if (!minutes) return '-'
      const hours = Math.floor(minutes / 60)
      const mins = minutes % 60
      if (hours > 0) {
        return `${hours}小时${mins > 0 ? mins + '分钟' : ''}`
      } else {
        return `${mins}分钟`
      }
    },
    
    getContestStatus(contest) {
      const now = Math.floor(Date.now() / 1000)
      if (now < contest.start_time) {
        return '即将开始'
      } else if (now >= contest.start_time && now <= contest.end_time) {
        return '进行中'
      } else {
        return '已结束'
      }
    },
    
    viewContest(id) {
      this.$router.push(`/contests/${id}`);
    },
    
    registerContest(id) {
      this.$message.success('报名成功！');
    },
    
    enterContest(id) {
      this.$router.push(`/contests/${id}/problems`);
    }
  }
}
</script>

<style scoped>
.contests-wrapper {
  margin: 0 auto;
  padding: 10px 0 24px 0;
}
.block-card {
  margin-bottom: 24px;
}
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.page-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}
.contests-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.contests-toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.only-bottom-border-table >>> .el-table__header-wrapper th {
  border-bottom: 1px solid #ebeef5 !important;
}
.only-bottom-border-table >>> .el-table__body-wrapper td {
  border-bottom: 1px solid #ebeef5 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}
</style> 